/* index.css → index.html */

/* site-topbar start  */
.site-topbar {
  height: 40px;
  background-color: #333;
}

.site-topbar a {
  color: #b0b0b0;
  font-size: 12px;
}

.site-topbar a:hover {
  color: #fff;
}

.container {
}

.topbar-flex {
  /* background-color: khaki; */
  /* height: 40px; */
  display: flex;
  justify-content: space-between;
}

.topbar-nav {
  /* background-color: skyblue; */
}

.top-wrap {
  /* background-color: pink; */
}

/* > 限制影响范围 */
.topbar-nav > ul {
  height: 40px;
  /* border: 1px solid yellowgreen; */
  /* li水平排列 */
  display: flex;
  /* 间距 */
  column-gap: 15px;
  /* align-items: center; ← 不推荐使用 考虑子菜单的绝对定位 */
}

/* > 限制影响范围 */
.topbar-nav > ul li {
  height: 40px;
  line-height: 40px;
  /* border: 1px solid yellow; */
}

.topbar-nav > ul > li a {
  color: #b0b0b0;
}

.topbar-nav > ul > li a:hover {
  color: #fff;
}

/* .topbar-nav ul li a:hover {
        color: #fff;
      } */

.topbar-nav > ul > li.submenu {
  /* 给▼箭头腾出位置 */
  padding-right: 13px;
  position: relative;
}

/* 绘制子菜单顶部的小三角形 */
.topbar-nav > ul > li.submenu::after {
  content: "";
  width: 0;
  height: 0;
  border: 6px solid transparent;
  position: absolute;
  border-bottom-color: #fff;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}

.topbar-nav > ul > li.submenu:hover::after {
  display: block;
}

/* 绘制箭头 */
.topbar-nav > ul > li.submenu::before {
  content: "";
  width: 7px;
  height: 7px;
  /* background-color: khaki; */
  position: absolute;
  /* 取两边框线构成箭头主体 */
  border-top: 1px solid #b0b0b0;
  border-left: 1px solid #b0b0b0;
  /* 防止过于靠近右边框 */
  right: 2px;
  top: 50%;
  /* translateY(-50%)是div的中心, ↑ -25% 是三角的中心 视觉上更好看 rotate旋转角度向下 */
  transform: translateY(-75%) rotate(-135deg);
  transition: transform 0.3s;
}

/* 鼠标移入，箭头旋转▼→▲  */
.topbar-nav > ul > li.submenu:hover > a {
  color: #fff;
}

.topbar-nav > ul > li.submenu:hover::before {
  /* translateY(-50%)是div的中心 ↓+25% 三角中心 */
  transform: translateY(-25%) rotate(45deg);
  border-color: #fff;
}

.submenu-list {
  width: 105px;
  /* min-height: 200px; */
  background-color: #fff;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.3);
  /* padding: 6px 0 8px 6px; */
  transition: height 0.3s;
  height: 0;
  /* 小三角形不能绘制在这里，因为 overflow: hidden 的影响 */
  overflow: hidden;
  z-index: 333;
}

.submenu-list ul {
  padding: 6px 0 8px 6px;
}

.submenu-list ul li {
  /* border: 1px solid red; */
  line-height: 1;
  height: 16px;
  margin-bottom: 14px;
}

.submenu-list ul li:last-child {
  margin-bottom: 0;
}

li.submenu:hover .submenu-list {
  height: 150px;
}

.submenu-list ul li a {
  /* font-size: 0; */
  /* 坚决inline-block产生的间隙 */
  display: flex;
}

/* .submenu-list ul li a span {
        font-size: 14px;
      } */

.submenu-list ul li a .icon {
  font-size: 16px;
  margin-right: 4px;
}

/* 注意选择器的优先级影响 */
.topbar-nav .submenu-list ul li a:hover {
  color: #ff6a00;
}

.submenu .download {
  width: 124px;
  height: 148px;
  background-color: #fff;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
  /* 弹性布局会有问题 */
  /* display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; */
  /* 造成漏边 */
  /* padding-top: 3px; */
  box-shadow: 0px 1px 7px 0 rgba(0, 0, 0, 0.3);
  height: 0;
  overflow: hidden;
  transition: height 0.3s;
  z-index: 3;
}

.submenu .download img {
  display: block;
  margin: 17px auto 0;
}

.submenu .download p {
  line-height: 1;
  margin-top: 16px;
  text-align: center;
}

.submenu:hover .download {
  height: 148px;
}

.top-wrap {
  display: flex;
}

.top-wrap .topbar-info {
  display: flex;
  align-items: center;
  column-gap: 13px;
  margin-right: 15px;
}

.top-wrap .topbar-cart {
  width: 120px;
  height: 40px;
  position: relative;
}

.top-wrap .topbar-cart a {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #424242;
  font-weight: 400;
  /* 延迟移出鼠标后 恢复到原来的颜色 */
  transition: all 0s 0.3s;
}

.top-wrap .topbar-cart:hover a {
  transition-delay: 0s;
  background-color: #fff;
  color: #ff6a00;
}

.top-wrap .topbar-cart a span {
  margin-right: 7px;
}

.top-wrap .topbar-cart .cart-menu {
  width: 316px;
  height: 0;
  background-color: #fff;
  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 40px;
  right: 0;
  line-height: 100px;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
  transition: height 0.3s;
  z-index: 3;
}

.top-wrap .topbar-cart:hover .cart-menu {
  height: 100px;
}

/* .site-topbar end  */

/* site-header start */
.site-header {
  /* background-color: khaki; */
  height: 56px;
  padding: 23px 0 21px 0;
}

.site-header .header-container {
  display: flex;
}

.site-header .header-container .header-logo {
  /* 占满剩余空间 */
  flex: 1;
  /* background-color: aqua; */
}

/* 为了seo  */
h1 {
  display: none;
}

.header-container .header-nav {
  margin-right: 80px;
}

.header-container .header-nav ul {
  display: flex;
  column-gap: 20px;
  align-items: center;
  /* 不设置无法居中 */
  height: 56px;
}

.header-container .header-nav ul li a {
  color: #333;
  font-size: 16px;
}

.header-container .header-nav ul li a:hover {
  color: #ff6a00;
}

.header-search input.search-text {
  width: 236px;
  height: 50px;
  border: 1px solid #e0e0e0;
  border-right: none;
  padding-left: 9px;
  /* 注意怪异盒模型 */
  /* box-sizing: border-box; */
  /* width: 245px; */
  /* height: 52px; */
}

.header-search .search-button {
  width: 52px;
  height: 52px;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  font-size: 18px;
  color: #b0b0b0;
}

.header-search .search {
  height: 56px;
  /* 清除input和button之间的间距 */
  display: flex;
  align-items: center;
  position: relative;
}

.header-search .search:hover input.search-text,
.header-search .search:hover .search-button {
  border-color: #b6b5b5;
}

.header-search input.search-text::placeholder {
  color: #b0b0b0;
  font-size: 14px;
}

.header-search .search .search-button {
  transition: all 0.3s;
}

/* 注意优先级 */
.header-search .search .search-button:hover {
  background-color: #ff6a00;
  color: #fff;
  border-color: #ff6a00;
  cursor: pointer;
}

.header-search .search .keyword-list {
  width: 245px;
  border: 1px solid #ff6a00;
  /* border-top: none; */
  background-color: #fff;
  /* min-height: 300px; */
  position: absolute;
  left: 0;
  /* 注意边框 */
  top: 53px;
  display: none;
  z-index: 2;
}

.header-search .search .keyword-list ul li {
  font-size: 12px;
}

/* 拉满宽度方便点击 */
.header-search .search .keyword-list ul li a {
  display: block;
  height: 30px;
  line-height: 30px;
  color: #333;
  padding-left: 10px;
}

.header-search .search .keyword-list ul li a:hover {
  background-color: #ececec;
}

.header-search .search input.search-text:focus,
.header-search .search input.search-text:focus ~ .search-button {
  border-color: #ff6a00;
}

/* .header-search .search input.search-text:focus ~ .keyword-list {
        display: block;
      } */

.header-search .search .keyword-list.show {
  display: block;
}

/* .site-header end  */

/* 产品分类 start */
.page1 {
  height: 460px;
  /* background-color: khaki; */
  /* 方便给产品分类menu定位 */
  position: relative;
}

.swiper1 {
  height: 460px;
  /* 重写 Swiper 翻页样式 */
  /* 设置Swiper风格 */
  /* --swiper-theme-color: #ff6600;  */
  --swiper-navigation-color: #fff; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 31px; /* 设置按钮大小 */
}

.swiper1 .swiper-button-prev,
.swiper1 .swiper-rtl .swiper-button-next {
  left: 244px;
}

.swiper1 .swiper-pagination {
  position: absolute;
  text-align: right;
  padding-right: 34px;
  box-sizing: border-box;
  height: 14px;
  line-height: 1;
  bottom: 26px;
  /* transition: 3s opacity;
        transform: translate3d(0, 0, 0);
        z-index: 10; */
}

.swiper1 .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border: 2px solid #4d4d4d;
  background-color: transparent;
  opacity: 1;
}

/* 被激活的样式  */
.swiper1 .swiper-pagination-bullet-active {
  background-color: #666;
}

.category {
  width: 234px;
  height: 460px;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 222;
}

.category ul {
  padding-top: 19px;
}

.category ul li {
  font-size: 14px;
  height: 42px;
  /* padding-left: 30px; */
  /* color: #fff; */
  /* cursor: pointer; */
}

.category > ul > li > a {
  display: block;
  color: #fff;
  height: inherit;
  line-height: 42px;
  /* text-indent: 30px; */
  background: url(../images/right-jiantou.png) no-repeat 203px center;
  padding-left: 30px;
}

.category > ul > li:hover > a {
  background-color: #ff6a00;
}

.category ul li .category-item {
  height: 460px;
  /* min-width: 250px; */
  background-color: #fff;
  border: 1px solid #666;
  position: absolute;
  left: 234px;
  top: 0px;
  /* 网格布局 */
  display: grid;
  /* grid-template-rows: repeat(6, 76px); */
  grid-template-rows: repeat(5, 76px) 59px;
  /* repeat(1, 248px) */
  grid-template-columns: repeat(1, 247.5px);
  grid-auto-flow: column;
  grid-auto-columns: 247.5px;
  display: none;
  padding-top: 21px;
  box-sizing: border-box;
  box-shadow: 0 0 2px #ddd;

  /* 弹性布局 搞不定背景 背景要跟着内容来 */
  /* display: flex; */
  /* flex-direction: column; */
  /* flex-wrap: wrap; */
  /* 实验阶段性质 */
  /* width: max-content; */
  /* 25px + 272px  */
}

.category ul li .category-item a {
  padding-left: 25px;
  display: flex;
  align-items: center;
  height: 38px;
  padding-bottom: 38px;
  color: #333;
  /* border:1px solid red; */

  /* 如果用弹性布局 */
  /* width: 247px; */
  /* height: 76px; */
}

.category ul li .category-item a:nth-last-child(6n) {
  padding-bottom: 21px;
  /* padding: 0; */
}

.category ul li .category-item a img {
  margin-right: 19px;
}

.category ul li .category-item a:hover {
  color: #ff6a00;
}

.category ul li:hover .category-item {
  display: grid;
}
/* 产品分类 end */

/* 推荐歌单 start */

.page2 {
  /* min-height: 624px; */
  background-color: #f7f7f7;
  margin-top: 26px;
  padding-bottom: 33px;
}

.page2 .recommend-banner {
  /* border: 1px solid red; */
  /* 不用margin-top，因为会造成塌陷或合并 */
  padding-top: 26px;
}

.page2 .recommend-banner a img {
  /* 消除图片下方间隙 */
  display: block;
}

.page2 .recommand-music {
  /* min-height: 400px; */
  /* background-color: khaki; */
  margin-top: 40px;
}

.page2 .recommand-music h2.music-title {
  text-align: center;
  /* border: 1px solid red; */
  font-size: 32px;
  /* 32p x 1.5m 继承 = 48px 48-32=16  */
  /* 48 - 8  */
}

.page2 .recommand-music .music-tabs ul.tab-header {
  /* background-color: skyblue; */
  display: flex;
  justify-content: center;
  column-gap: 56px;
  /* 34-8-4 = 22 */
  margin-top: 22px;
}

.page2 .recommand-music .music-tabs ul.tab-header li {
  font-size: 16px;
  /* 行高 = 16px * 1.5 = 24  */
  cursor: pointer;
}

.page2 .recommand-music .music-tabs ul.tab-header li.active {
  color: #31c27c;
}

.page2 .recommand-music .music-tabs .tab-content {
  /* 35-4 */
  margin-top: 31px;
  /* 224+14+14+8+14+4 */
  min-height: 278px;
}

.page2 .recommand-music .music-tabs .tab-content .tab-content-item {
  /* min-height: 300px; */
  /* background-color: pink; */
  /* border: 1px solid blue; */
  display: none;
}

.page2 .recommand-music .music-tabs .tab-content .tab-content-item.active {
  display: block;
}

.music-tabs .tab-content ul.music-list {
  display: flex;
  column-gap: 26px;
}

.music-tabs .tab-content ul.music-list li {
  width: 224px;
  /* min-height: 200px; */
  /* background-color: pink; */
  /* flex: 1; */
  cursor: pointer;
}

.music-tabs .tab-content ul.music-list li .img {
  width: 224px;
  /* min-height: 224px; */
  /* background-color: pink; */
  overflow: hidden;
  position: relative;
}

.music-tabs .tab-content ul.music-list li .img img {
  display: block;
  transition: transform 0.5s;
}

.music-tabs .tab-content ul.music-list li a {
  display: block;
}

.music-tabs .tab-content ul.music-list li:hover .img img {
  transform: scale(1.2);
}

.music-tabs .tab-content ul.music-list li .img::before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: rgba(0, 0, 0, 0);
  z-index: 3;
  transition: background-color 0.5s;
}

.music-tabs .tab-content ul.music-list li:hover .img::before {
  background-color: rgba(0, 0, 0, 0.3);
}

.music-tabs .tab-content ul.music-list li .img span.icon-play {
  font-size: 65px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  color: #fff;
  transition: transform 0.5s;
  z-index: 4;
}

.music-tabs .tab-content ul.music-list li:hover .img span.icon-play {
  transform: translate(-50%, -50%) scale(1);
}

.music-tabs .tab-content ul.music-list li p.title {
  margin-top: 10px;
  margin-bottom: 1px;
}

.music-tabs .tab-content ul.music-list li a:hover p.title {
  color: #31c27c;
}

/* 推荐歌单 end */

/* 家居产品 start */

.page3 .recommand-products {
  /* min-height: 500px; */
  /* background-color: khaki; */
  padding-top: 28px;
}

.product-header {
  display: flex;
  justify-content: space-between;
}

.product-header .title h2 {
  font-size: 24px;
  font-weight: bold;
}

.product-header .title p {
  line-height: 22px;
  max-width: 826px;
  margin-top: 10px;
}

.product-header .more-button {
  width: 118px;
  height: 42px;
  border-radius: 20px;
  border: 1px solid rgba(186, 186, 186, 0.35);
  text-align: center;
  line-height: 42px;
  color: #000;
  margin-top: 18px;
}

.product-header .more-button:hover {
  background-color: #ff6a00;
  color: #fff;
  border-color: #ff6a00;
}

.product-content {
  margin-top: 29px;
  display: grid;
  grid-template-rows: 295px 85px 295px;
  grid-template-columns: 610px 295px 295px;
  gap: 20px 13px;
  grid-template-areas:
    "a b c"
    "a d c"
    "a d e";
}

.product-content .product-item {
  position: relative;
}

.product-content .product-item:nth-child(1) {
  grid-area: a;
}

.product-content .product-item:nth-child(2) {
  grid-area: b;
}

.product-content .product-item:nth-child(3) {
  grid-area: d;
  background-color: blue;
}

.product-content .product-item:nth-child(4) {
  grid-area: c;
}

.product-content .product-item:nth-child(5) {
  grid-area: e;
}

.product-content .product-item .dot {
  width: 32px;
  height: 32p×;
  /* border: 1px solid red; */
  position: absolute;
  /* 解决鼠标移动到dot-tips上消失的问题 */
  padding-right: 9px;
  display: none;
}

.product-content .product-item:hover .dot {
  display: block;
  cursor: pointer;
}

.product-item .dot::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #fff;
  /*背景延伸区*/
  background-clip: content-box;
  border: 9px solid rgba(0, 0, 0, 0.3);
  display: block;
  border-radius: 50%;
  transition: transform 0.5s;
}

/*背景延伸区*/
/* background-cLip:content-box; */
/* 
.product-item .dot::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  transition: transform 0.5s;
}

.product-item .dot:hover::after {
  transform: translate3d(0, -50%, 0) scale(0.9);
} */

.dot1 {
  left: 248px;
  top: 249px;
}

.dot2 {
  left: 128px;
  top: 359px;
}

.dot3 {
  left: 71px;
  top: 460px;
}

.dot4 {
  top: 152px;
  left: 52px;
}

.dot5 {
  top: 284px;
  left: 80px;
}

.product-item .dot:hover::before {
  transform: scale(0.9);
  box-shadow: 0 0 3px #fff;
}

.product-item .dot .dot-tips {
  width: 150px;
  /* height: 89px; */
  background-color: #fff;
  position: absolute;
  left: 41px;
  top: 50%;
  transform: translate3d(0, -50%, 0);
  padding: 10px 10px 9px 10px;
  display: none;
}

.product-item .dot:hover .dot-tips {
  display: block;
}

.product-item .dot:hover .dot-tips p.title {
  font-weight: bold;
}

.product-item .dot:hover .dot-tips p.desc {
  line-height: 1.5;
  /* margin-top: 2px; */
}

.product-item .dot:hover .dot-tips p.price {
  font-size: 0;
}

.product-item .dot:hover .dot-tips p.price i {
  font-size: 12px;
  font-weight: bold;
}

.product-item .dot:hover .dot-tips p.price span {
  font-size: 24px;
  font-weight: bold;
}

/* 家居产品 end */

/* 精彩视频 start */

.page4 {
  background-color: #f8f8f8;
  margin-top: 40px;
  padding-bottom: 51px;
}

.recommend-video {
  /* 后面删除 */
  min-height: 500px;
  /* background-color: khaki; */
}

.recommend-video h2.title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  color: #000;
  line-height: 1;
  padding: 34px 0 33px 0;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 10px;
}

.video-list .video-item {
  /* min-height: 200px; */
  width: 302px;
  /* border: 1px solid blue; */
}

/* 防御式编程 */
.video-list span.col {
  width: 302px;
}

.video-list .video-item:hover {
  box-shadow: 3px 3px 8px #ddd;
}

.video-item .img-container {
  height: 190px;
  cursor: pointer;
  position: relative;
}

.video-item .img-container span.iconfont {
  font-size: 30px;
  color: #fff;
  position: absolute;
  right: 13px;
  bottom: 15px;
  line-height: 1;
}

.video-item p.title {
  line-height: 55px;
  text-align: center;
  background-color: #fff;
}

.video-item p.title a {
  color: #000;
  display: block;
  font-size: 16px;
}

.video-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  /* padding: 0; */
  /* 初始是隐藏的 */
  display: none;
}

.video-mask .video-content {
  width: 1226px;
  /* min-height: 300px; */
  background-color: khaki;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.video-mask .video-content video {
  width: 1226px;
  display: block;
}

.video-mask .video-content .close-button {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #fff;
  right: -15px;
  top: -15px;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
}

.video-mask .video-content .close-button::before,
.video-mask .video-content .close-button::after {
  content: "";
  /*display:block;*/
  width: 20px;
  height: 1px;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.video-mask .video-content .close-button::before {
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.video-mask .video-content .close-button::after {
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

/* 精彩视频 end */

/* 推荐信息 start */

.page5 {
  padding-bottom: 64px;
}

.recommend-info {
  /* del */
  min-height: 400px;
  /* background-color: khaki; */
}

.recommend-info h2.title {
  font-size: 34px;
  font-weight: bold;
  text-align: center;
  color: #000;
  line-height: 1;
  padding: 33px 0 44px 0;
}

.recommend-info h2.title::before {
  content: "";
  width: 30px;
  height: 2px;
  background-color: #c7000b;
  position: absolute;
  left: 50%;
  transform: translate3d(-50%, 46px, 0);
}

.recommend-info .recommend-content {
  display: grid;
  grid-template-rows: repeat(2, 320px);
  grid-template-columns: 300px 287px 299px 300px;
  /*grid-template-areas:;*/
  gap: 30px 14px;
}

.recommend-content .item {
  overflow: hidden;
}

.recommend-content .item:nth-child(1) {
  /* 起始行网格线 起始列 结束行 结束列网格线  */
  grid-area: 1/1/1 / span 2;
  /* background-color: skyblue; */
}

.recommend-content .item:nth-child(5) {
  /* 起始行网格线 起始列 结束行 结束列网格线  */
  grid-area: 2/2/3 / span 2;
  /* background-color: skyblue; */
}

.recommend-content .item img {
  transition: transform 0.5s;
}

.recommend-content .item:hover img {
  transform: scale(1.3);
}

.recommend-content .item {
  position: relative;
  cursor: pointer;
}

.recommend-content .item-mask::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  transition: background-color 0.5s;
  /* display: none; */
}

.recommend-content .item-mask:hover::before {
  background-color: rgba(0, 0, 0, 0.4);
}

.recommend-content .item .recommend-text {
  width: 100%;
  /*height:300px;*/
  /* background-color: khaki; */
  position: absolute;
  left: 0;
  bottom: -58px;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding-bottom: 40px;
  padding-left: 20px;
  transition: bottom 0.5s;
  z-index: 3;
}

.recommend-content .item .recommend-text span {
  line-height: 1;
  margin-bottom: 12px;
  /* border: 1px solid red; */
}

.recommend-content .item .recommend-text p.title {
  line-height: 1;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

/* .recommend-content .item .recommend-text p.title {
        font-size: 16px;
      } */

.recommend-content .item .recommend-text p.more {
  font-size: 0;
  margin-top: 23px;
}

.recommend-content .item .recommend-text p.more span {
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
}

.recommend-content .item .recommend-text p.more i {
  color: #c70318;
  font-size: 12px;
  /* border: 1px solid red; */
  /* margin-left: 11px; */
  margin-left: 5px;
  /* line-height: 16px; */
}

.recommend-content .item:hover .recommend-text {
  bottom: 0;
}

/* 推荐信息 end */

/* 手风琴效果 start  */

.page6 {
  background-color: #f8f8f8;
  padding-top: 51px;
  padding-bottom: 40px;
}

.page6 .container {
  /* min-height: 400px; */
  /* background-color: khaki; */
}

.page6 .container .logo {
  text-align: center;
  line-height: 1;
  padding-bottom: 44px;
}

.accordion ul {
  height: 270px;
  display: flex;
  flex-direction: row-reverse;
}

.accordion ul li {
  /* border: 1px solid blue; */
  flex: 1;
  transition: flex 0.3s;
  overflow: hidden;
  border: 1px solid #fff;
  position: relative;
}

.accordion ul li:first-child {
  border: none;
}

.accordion ul li:last-child {
  flex: 2.1;
}

.accordion ul li:nth-child(2n) {
  background-color: pink;
}

.accordion ul li:nth-child(2n + 1) {
  background-color: skyblue;
}

.accordion ul li:hover {
  flex: 2.1;
}
.accordion ul li:hover ~ li {
  flex: 1;
}

.accordion ul li p {
  width: 100%;
  height: 75px;
  padding-left: 20px;
  position: absolute;
  left: 0;
  bottom: -75px;
  /* text-align: center; */
  line-height: 75px;
  color: #fff;
  font-size: 16px;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
  transition: bottom 0.3s;
}

.accordion ul li:hover p {
  bottom: 0;
}

/* 手风琴效果 end  */
